﻿@page "/topicmanager"
@using ELS.Services
@using FluentValidation
@inject IAccountService AccountService

@if (questions == null)
{
	<MudProgressCircular Color="Color.Default" Indeterminate="true" />
}
else
{
	if (AccountService.User == null)
	{
		<MudAlert Severity="MudBlazor.Severity.Error">
			您为未登录状态，请先登录！
		</MudAlert>

		<MudButton Class="mt-4" Variant="Variant.Filled" Color="Color.Primary" Href="/account/login">登录</MudButton>
		return;
	}
	<MudGrid Spacing="2">
		<MudItem xs="12" sm="3">
			<MudPaper Class="pa-4" Style="height: 88vh;">
				<div class="d-flex mb-4">
					<MudText Typo="Typo.h5">题目列表</MudText>
					<MudSpacer />
					<MudTooltip Text="上传文件" Mudaround="true">
						<MudFileUpload T="IBrowserFile" OnFilesChanged="UploadFiles" Accept=".xlsx">
							<ActivatorContent>
								<MudIconButton Style="width: 32px; height: 32px;"
											   Icon="@Icons.Material.Filled.Upload"
											   Color="Color.Inherit"
											   Size="Size.Small" />
							</ActivatorContent>
						</MudFileUpload>
					</MudTooltip>

					<MudTooltip Text="添加题目" Mudaround="true">
						<MudIconButton Style="width: 32px; height: 32px;"
									   Icon="@Icons.Material.Filled.Add"
									   @onclick="AddQuestion"
									   Color="Color.Inherit"
									   Size="Size.Small" />
					</MudTooltip>
					<MudTooltip Text="删除题目" Mudaround="true">
						<MudIconButton Style="width: 32px; height: 32px;"
									   Icon="@Icons.Material.Filled.Delete"
									   @onclick="DeleteQuestion"
									   Color="Color.Inherit"
									   Size="Size.Small" />
					</MudTooltip>
				</div>
				<MudList CheckBoxColor="Color.Primary" T="int" Style="height: calc(100% - 36px); overflow-y: auto;" SelectionMode="SelectionMode.MultiSelection" @bind-SelectedValues="selectedIDs">
					@foreach (var question in questions)
					{
						<MudListItem Value="@(question.Id)" Style="overflow:hidden;white-space: nowrap;" @onclick="@(() => UpdateCurrentQuestion(question.Id))"
									 IconSize="Size.Small">
							<div class="d-flex">
								<MudText Typo="Typo.body1" Style="overflow:hidden;white-space: nowrap;">@question.Title</MudText>
							</div>
						</MudListItem>
					}
				</MudList>
			</MudPaper>
		</MudItem>

		<MudItem xs="12" sm="9">
			<MudPaper Class="pa-4">
				<div class="d-flex">
					<MudText Style="text-align:center;" Typo="Typo.h5" Class="mb-4">@("ID: " + currentQuestion.Id.ToString())</MudText>
					<MudSpacer />
					<MudIconButton Icon="@Icons.Material.Filled.SkipPrevious" @onclick="PreviousQuestion" Style="width: 32px; height: 32px;" Color="Color.Inherit"
								   Size="Size.Small" />
					<MudIconButton Icon="@Icons.Material.Filled.SkipNext" @onclick="NextQuestion" Style="width: 32px; height: 32px;" Color="Color.Inherit"
								   Size="Size.Small" />
				</div>

				<MudForm Model="@currentQuestion" Spacing="4" @ref="@form" Validation="@(questionValidator.ValidateValue)" ValidationDelay="0">
					<MudTextField @bind-Value="currentQuestion.Title"
								  For="@(() => currentQuestion.Title)"
								  Immediate="true"
								  class="w-full"
								  Variant="Variant.Outlined"
								  Lines="5"
								  Label="题目" />
					<MudNumericField @bind-Value="currentQuestion.CurentAnswerIndex"
									 For="@(() => currentQuestion.CurentAnswerIndex)"
									 Immediate="true"
									 Variant="Variant.Outlined"
									 Label="正确答案" />
					<MudSelect @bind-Value="currentQuestion.Category"
							   For="@(() => currentQuestion.Category)"
							   Variant="Variant.Outlined"
							   Label="分类">
						<MudSelectItem T="string" Value="@("历史")">历史</MudSelectItem>
						<MudSelectItem T="string" Value="@("文学")">文学</MudSelectItem>
						<MudSelectItem T="string" Value="@("经济")">经济</MudSelectItem>
						<MudSelectItem T="string" Value="@("人文")">人文</MudSelectItem>
						<MudSelectItem T="string" Value="@("理科")">理科</MudSelectItem>
						<MudSelectItem T="string" Value="@("艺术")">艺术</MudSelectItem>
						<MudSelectItem T="string" Value="@("军事")">军事</MudSelectItem>
						<MudSelectItem T="string" Value="@("体育")">体育</MudSelectItem>
						<MudSelectItem T="string" Value="@("其他")">其他</MudSelectItem>
					</MudSelect>

					<div class="d-flex gap-8">
						<MudTextField @bind-Value="currentQuestion.Answer1"
									  For="@(() => currentQuestion.Answer1)"
									  Immediate="true"
									  Variant="Variant.Outlined"
									  Label="答案1" />
						<MudTextField @bind-Value="currentQuestion.Answer2"
									  For="@(() => currentQuestion.Answer2)"
									  Immediate="true"
									  Variant="Variant.Outlined"
									  Label="答案2" />
					</div>
					<div class="d-flex gap-8">
						<MudTextField @bind-Value="currentQuestion.Answer3"
									  For="@(() => currentQuestion.Answer3)"
									  Immediate="true"
									  Variant="Variant.Outlined"
									  Label="答案3" />
						<MudTextField @bind-Value="currentQuestion.Answer4"
									  For="@(() => currentQuestion.Answer4)"
									  Immediate="true"
									  Variant="Variant.Outlined"
									  Label="答案4" />
					</div>
				</MudForm>
				<MudCardActions>
					<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto" OnClick="@(async () => await Submit())">提交</MudButton>
				</MudCardActions>
			</MudPaper>
		</MudItem>
	</MudGrid>

	<MudOverlay @bind-Visible="_visible" DarkBackground >
		<MudProgressCircular Color="Color.Primary" Size="Size.Large" Indeterminate="true" />
	</MudOverlay>
}
